<template>
    <div class="cattle-view">
        <mt-header fixed title="牛人榜" class="mt-header"></mt-header>
        <!-- <h1>这个是CattleView</h1> -->
        <ul>
            <li v-for="item in cattleList">
                <div class="item-header">
                    <div class="item-header-left">
                        <figure>
                            <img :src="item.pic" alt="">
                        </figure>
                        <h4>{{item.name}}</h4>
                    </div>
                    <router-link :to="{path: '/cattle-detail/'+item.id}" class="item-header-right"> 详情 </router-link>
                </div>
                <div class="item-body">
                    <div class="item-body-left">

                        <my-chart style="height: 100%" :data="item.sums || seriesdata" top="15px" bottom="15px" left="3px"></my-chart>


                    </div>
                    <div class="item-body-right">
                        <div class="item-body-line">
                            <div>
                                <p>{{((+item.earnings)/100).toFixed(2) + '%' || '0'}}</p>
                                <span>本月收益</span>
                            </div>
                            <div>
                                <p>{{((+item.earnings_total)/100).toFixed(2) + '%' || '0'}}</p>
                                <span>总收益</span>
                            </div>
                            <div>
                                <p>{{ (+item.profit_points).toFixed(2) || '0'}}</p>
                                <span>当月获利点数</span>
                            </div>
                        </div>
                        <div class="item-body-line">
                            <div>
                                <p>{{ item.order_count || '0'}}</p>
                                
                                <span>交易次数</span>
                            </div>
                            <div>
                                <p>{{ item.max_loss || '0'}}</p>
                                <span>最大回撤比例</span>
                            </div>
                            <div>
                                <p>{{ item.redu || '0' }}</p>
                                <span>跟随热度</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

        <!-- <my-chart class="abc"  :data="seriesdata"></my-chart> -->
        
        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import MyChart from '@/components/mychart'
    export default {
        name: 'CattleView',
        components:{MyChart},
        data() {
            return {
                seriesdata: "3.6,36.09,63.22,152.9,165.76,203.38,204.75,216.4,223.34,235.76",

                option: {
                    color:['#d36d82'],
                    series:[{
                        data: [3.6,36.09,63.22,152.9,165.76,203.38,204.75,216.4,223.34,235.76],
                        type:'bar'
                    }]
                }
            }
        },
        computed: {
            ...mapState({
                cattleList: state => state.cattle.cattleList
            })
        },
        methods: {
            getCattleList () {
                this.$store.dispatch("getCattleList")
            }
        },
        created () {
            this.getCattleList();
        }
    }
</script>

<style scoped>
    .cattle-view{
        margin-bottom: 50px;
        padding-top: 40px;
        background: #eee;
    }
    .cattle-view .mt-header {
        background: #fff;
        color: #666;
        margin-bottom: 15px;
        border-bottom: 1px solid #FFF54C;
    }
    .cattle-view ul{
        list-style: none;
        margin: 0 0 15px 0;
        padding: 0;
    }
    .cattle-view ul li {
        margin: 5px 0;
        padding: 5px;
        background: #fff;
    }
    .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
    }
    .item-header-left {
        display: flex;
        align-items: center;
    }
    .item-header figure {
        margin: 0 15px 0 0;
        width: 25px;
        height: 25px;
        border: 1px solid #ddd;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .item-header figure img {
        width: 100%;
        height: 100%;
    }
    .item-header h4 {
        margin: 0;
        font-size: 13px;
    }
    .item-header a {
        width: 80px;
        height: 25px;
        line-height: 27px;
        border-radius: 5px;
        background: #FFF54C;
        border:1px solid #eee;
        letter-spacing: 2px;
        text-decoration: none;
        color: #666;
        font-size: 12px;
    }
    .item-body {
        display: flex;
        justify-content: space-between;
    }
    .item-body .item-body-left {
        width: 25%;

        display: flex;
        align-items: flex-end;
    }
    .item-body .item-body-right {
        flex: 1;
        /*border: 1px solid green;*/
    }
    .item-body-line {
        display: flex;
        padding: 3px 0;
    }
    .item-body-line > div {
        flex: 1;

        display: flex;
        flex-direction: column;
    }
    .item-body-line p {
        margin: 5px 0 5px 0;
        font-size: 12px;
        color: #555;
        line-height: 16px;
    }
    .item-body-line span {
        font-size: 12px;
        color: #999;
    }

    .abc {
        height: 300px;
    }
</style>